//计算引擎设定

<template>
  <a-card title="计算模型设定页面">
    <a-form :label-col="layout.labelCol" :wrapper-col="layout.wrapperCol">
      <a-form-item label="客户所属行业">
        <a-select
          v-model:value="industry"
          style="width: 270px"
          :fieldNames="{ label: 'industryName', value: 'industryId' }"
          :options="industryCategories"
        ></a-select>
      </a-form-item>

      <a-form-item label="计算模型">
        <a-select
          v-model:value="model"
          style="width: 270px"
          :fieldNames="{ label: 'modelName', value: 'modelId' }"
          :options="calculationModels"
        ></a-select>
        <a-button @click="showSettings" style="margin-top: 10px; margin-left: 10px"
          >详细设置</a-button
        >
      </a-form-item>

      <a-form-item label="操作边界">
        <a-checkbox-group
          v-model="selectedValues"
          :options="checkboxOptions"
        ></a-checkbox-group>
        <!-- <a-checkbox v-model="scope1">Scope 1（直接排放）</a-checkbox>
        <a-checkbox v-model="scope2">Scope 2（间接能源排放）</a-checkbox>
        <a-checkbox v-model="scope3">Scope 3（其他间接排放）</a-checkbox> -->
      </a-form-item>

      <a-form-item label="地理边界">
        <a-select
          v-model:value="geographicBoundary"
          style="width: 270px"
          :fieldNames="{
            label: 'geographicalBoundariesName',
            value: 'geographicalBoundariesId',
          }"
          :options="geographicalBoundaries"
        ></a-select>
        <!-- <a-select style="width: 270px" v-model="geographicBoundary">
          <a-select-option value="global">全球</a-select-option>
          <a-select-option value="regional">区域</a-select-option>
          <a-select-option value="national">国家</a-select-option>
        </a-select> -->
      </a-form-item>

      <a-form-item label="时间边界">
        <!-- <a-select
          v-model:value="dateRange"
          style="width: 270px"
          :fieldNames="{ label: 'modelName', value: 'modelId' }"
          :options="timeBoundaries"
        ></a-select> -->
        <a-range-picker v-model="dateRange" style="width: 270px" />
      </a-form-item>

      <a-form-item label="碳排因子来源">
        <a-select
          v-model:value="carbonFactorSource"
          style="width: 270px"
          :fieldNames="{ label: 'emissionFactorName', value: 'emissionFactorsId' }"
          :options="emissionFactors"
        ></a-select>
      </a-form-item>

      <a-form-item label="计算类型">
        <a-checkbox v-model="productCarbonFootprint">产品碳足迹</a-checkbox>
        <a-checkbox v-model="corporateCarbonFootprint">企业碳足迹</a-checkbox>
        <a-checkbox v-model="supplyChainCarbonFootprint">供应链碳足迹</a-checkbox>
      </a-form-item>

      <a-form-item>
        <a-button type="primary" style="margin-left: 70px" @click="save">保存</a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { calculationEngineSettings } from "/@/api/Carbon module/Carbon footprint module/calculationEngineSettings";

const layout = {
  labelCol: { span: 2 },
  wrapperCol: { span: 9 },
};
const industry = ref("");
const model = ref("");
const operationalBoundary = ref();

const geographicBoundary = ref("");
const dateRange = ref([null, null]); // For a-range-picker
const carbonFactorSource = ref("");
const productCarbonFootprint = ref(false);
const corporateCarbonFootprint = ref(false);
const supplyChainCarbonFootprint = ref(false);
const options = ref([]);
const showSettings = () => {};

const save = () => {
  // Save logic
};

// 行业类型
const industryCategories = ref([]);
async function queryIndustry() {
  let queryResult = await calculationEngineSettings.queryIndustry({
    pageNum: 1,
    pageSize: 100,
  });
  industryCategories.value = queryResult.data.list;
}

// 计算模型
const calculationModels = ref([]);
async function queryCalculationModels() {
  let queryResult = await calculationEngineSettings.queryCalculationModels({
    pageNum: 1,
    pageSize: 100,
  });

  calculationModels.value = queryResult.data.list;
}

// 操作边界
const operationalBoundaries = ref([]);
const checkboxOptions = ref([]);
const selectedValues = ref([]);
async function queryOperationalBoundaries() {
  let queryResult = await calculationEngineSettings.queryOperationalBoundaries({
    pageNum: 1,
    pageSize: 100,
  });
  operationalBoundaries.value = queryResult.data.list;
  // 转换为 Checkbox 数据结构
  checkboxOptions.value = operationalBoundaries.value.map((item) => ({
    label: item.operationalBoundariesName,
    value: item.operationalBoundariesId,
  }));
}
// options.value = {
//     label: queryResult.data.list.operationalBoundariesName,
//     value: queryResult.data.list.operationalBoundariesId,
//   };
// 地理边界
const geographicalBoundaries = ref([]);
async function queryGeographicalBoundaries() {
  let queryResult = await calculationEngineSettings.queryGeographicalBoundaries({
    pageNum: 1,
    pageSize: 100,
  });
  geographicalBoundaries.value = queryResult.data.list;
}

// 时间边界
const timeBoundaries = ref([]);
async function queryTimeBoundaries() {
  let queryResult = await calculationEngineSettings.queryTimeBoundaries({
    pageNum: 1,
    pageSize: 100,
  });
  timeBoundaries.value = queryResult.data.list;
}

// 碳排因子
const emissionFactors = ref([]);
async function queryEmissionFactors() {
  let queryResult = await calculationEngineSettings.queryEmissionFactors({
    pageNum: 1,
    pageSize: 100,
  });
  emissionFactors.value = queryResult.data.list;
}

onMounted(() => {
  queryIndustry();
  queryCalculationModels();
  queryOperationalBoundaries();
  queryGeographicalBoundaries();
  queryTimeBoundaries();
  queryEmissionFactors();
});
</script>

<style>
/* Add any necessary styles here */
</style>
